<link href="/vendor/bootstrap-fileinput/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="/vendor/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="/vendor/bootstrap-fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="/vendor/bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="/vendor/bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="/vendor/bootstrap-fileinput/js/fileinput.js"></script>
<script src="/vendor/bootstrap-fileinput/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/vendor/bootstrap-fileinput/js/locales/fa.js"></script>
<script src="/vendor/bootstrap-fileinput/js/locales/zh.js"></script>

<style>
.progress{width:auto;}
</style>
		  <div class="layui-form-item">
		    <label class="layui-form-label">相册</label>
		    <div class="layui-input-block">
				<input id="photo" type="hidden" name="photo" value="">
				<input id="input-file" type="file" name="input-file" multiple class="input-file">
			</div>
		</div>
<script>

$("#input-file").fileinput({
	language: 'zh', //设置语言
    uploadUrl: "<{:url('c/addphoto')}>", //上传的地址
    uploadAsync: true,
    deleteUrl: '<{:url('c/removephoto')}>',
    allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
    enctype: 'multipart/form-data',
    maxFileSize: 2000,
    maxFileCount: 20,//限制上传最大数量
    showUpload:true,
    showCaption: false,
    browseClass: "btn btn-primary", //按钮样式
    previewFileType:'any',
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    layoutTemplates: {
    	size: '',
    	footer:'<div class="file-thumbnail-footer">\n' +
        '    {progress} {actions}\n' +
        '</div>',
        actionZoom: ''
    },
});

//上传单个图片之后的回调， 图片写入input photo
$("#input-file").on('fileuploaded', function(event, data, fileindex) {
	var str = $("#photo").val() == '' ? "[]" : $("#photo").val();
	var arr = eval('(' + str + ')');
	arr.push( data.response.path );
	$("#photo").val(JSON.stringify(arr));
});

//移除已经上传了得图片的回调
$("#input-file").on('filedeleted', function(id, key) {
	var str = $("#photo").val() == '' ? "[]" : $("#photo").val();
	var arr = eval('(' + str + ')');
	
	var temp = [];
	for(var i in arr){
		if(key!=arr[i]){
			temp.push(arr[i]);
		} 
	}
	if(temp.length==0){
		$("#photo").val("");
	}else{
		$("#photo").val(JSON.stringify(temp));	
	}
});

//清空选择的全部图片之后的回调
$("#input-file").on('filecleared', function() {
	var str = $("#photo").val() == '' ? "[]" : $("#photo").val();
	var arr = eval('(' + str + ')');
	for(var i in arr){
		$("[data-key='"+arr[i]+"']").click();
	}
});
</script>		